<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Vue-</title>

</head>
<body>
<div id="app">
    <input type="text" v-model="msg">
    <!-- 添加记录 -->
    <input type="button" value="添加记录" v-on:click="save">

    <ul>
        <li v-for="li,index in lists">
            {{index+1}}&nbsp; &nbsp; &nbsp; {{li}}
            <a href="javascript:;" v-on:click="del(index)">删除</a>
        </li>
    </ul>
    <br>
    <span>总记录:{{lists.length}}</span>
    <input type="button" v-show="lists.length!=0" value="删除所有" v-on:click="delAll">

</div>
<!--
    1.完成记事本的查询所有思路: 1).将所有数据绑定为vue实例 2).遍历vue实例中数据到页面
    2.添加 1).添加按钮绑定事件中 2).在事件中获取输入框中数据 3).将获取的数据放入到lists里面
    3.删除   删除所有  总数量
-->
<!--在head或body标签内部，可以通过script标签引入外部的JS文件,这里引入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    const app = new Vue({
        el: "#app",
        data: {
            msg: "",
            lists: ["我是百万富翁", "我是千万富翁", "我是亿万富翁"],
        },
        methods: {
            save() {//添加到记事本
                this.lists.push(this.msg);
                this.msg = "";
            },
            del(index) {//删除一条记录
                //根据下标删除数组中某个元素
                this.lists.splice(index, 1);//参数1:从那个下标开始删除  参数2:删除几个元素
            },
            delAll() {//删除所有数据
                this.lists = [];
            }
        }
    })
</script>
</body>
</html>